Thank you for purchasing the ServerEast HTML template.
How to get help:
We will respond to buyers' questions via the contact form on our profile.
We run support Weekdays 9am-5pm GMT. You can expect a response within 12 – 24 hours Monday to Friday. We’ll respond to questions outside of these times & weekends occasionally, but please don’t expect a response outside our stated hours.
Support requests are for:
- Help using templates
- Instructions setting up templates
- Bug reports and fixes
Support requests aren’t for:
- Help with 3rd party plugins
- Integration of 3rd party plugins
- Customizations of our templates
Thanks for your purchase!
Included Folders
SERVEREAST-HTML:The main HTML template
SERVEREAST-HTML-RTL-SUPPORT:The converted HTML template to work with RTL(Right to Left) languages (arabic, hebrew etc.). Use this only if you want to make your web site in Right to Left direction
The ServerEast template is a responsive HTML template based on Bootstrap 3. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.
If you would like to edit the layout of any elements in whole template, you would do the following:
Open the file /style.css, so that is extremely easy to change any css attributes. Simply find the related and commented heading in this css file and make your magic.
The font for body text is Hind from Google Web fonts and for headings (h1, h2, h3 etc.) is Montserrat from Google Web fonts too. If you like to change these fonts with a usual web safe font (arial, verdana etc.) you must remove from
section of each page the lineServerEast using the following CSS files:
style.css
The main css file
css/animate.min.css
The main library for animation effects that you see on various pages.
css/font-awesome.min.css
The css file for font-awesome icons. To see all the available icons and instructions on how to use them click here
css/bootsrap.css, css/bootsrap-theme.css
The main responsive grid stylesheets, from Bootstrap 3 framework. It is recommended to make any changes/additions to style.css and keep bootsrap.css and bootsrap-theme.css as it are. In this way, you can easily upgrade the grid framework when Bootstrap releases an update.
css/block_grid_bootstrap.css
A custom addition to bootstrap grid. It provides the possibility to create grids with any columns that you want.
css/owl.carousel.css
The base stylesheet for carousels that the template using (testimonials in home page, carousel with fade effect in datacenter page, one item carousel in blog category)
css/owl.theme.css
The stylesheet that define the appearance of carousels. You can change saome things, for examople the color/size of pagination bullets.
css/jquery.circliful.css
The stylesheet for show numbers as Circle Statistics.
css/slicknav.css
The stylesheet for menu on small screens and mobiles.
css/tablesaw.stackonly.css
The stylesheet for responsive tables (exists in dedicated servers page)
ServerEast using jQuery framework with various additional plugins.
js/bootstrap.min.js
The main js file that hook the supported scripts of Bootstrap 3 framework
js/contact-script.js
The scripts that validates the contact form script in the contact page
js/hoverIntent.js
A helper file that make clickable each main menu options on touch screens.
js/jquery.circliful.min.js
The number counters in home page (a few lovely stats). You can set the options as data attributes and hook the script in the bottom of page (below of jquery)
js/jquery.min.js
The jQuery framework
js/jquery.slicknav.min.js
The menu on small screens and mobiles. The hook of the script exists in js/custom.js file on line 17.
js/jquery.tablesorter.min.js
The script that allows the tables to be sorted. An example is the Domain Price List in Domains page.
js/owl.carousel.min.js
The script for carousels that the template using (testimonials in home page, carousel with fade effect in datacenter page, one item carousel in blog category). The hook of the script for each page exists in js/custom.js file on line 39.
js/superfish.js
The main navigation menu script with it submenus. The hook of the script for each page exists in js/custom.js file on line 5.
js/waypoints.min.js
The script that hooks the statistics when the specific section is in viewport. You don't need to touch anything here.
js/jquery-ui.js
The script that using in VPS slider order and creates the handler and the slider experience.
js/tablesaw.stackonly.js
The script that convert the tables to responsive layout in smaller screens.
js/wow.min.js
The script that using for animations (in combination with animate.min.css) while scrolling the page
You can set the options as data attributes and hook the script in the bottom of page (below of jquery).
An example :
id="myStat1" data-dimension="180" data-animationstep="0.5" data-text="5513" data-width="25" data-fontsize="29" data-percent="64" data-fgcolor="#DE6262" data-bgcolor="#E1E3E4" data-fill="#CECECE"
id = used to create the animation when the section is in viewport. Must be different in each stat.
data-dimension = how big or small you need the circle.
data-animationstep = the speed that the color fill the circle
data-text = the number that displaying in the center of the circle.
data-fontsize = the font size of the number that displaying in the center of the circle
data-width = how big or small you need the color that fill the circle
data-fgcolor= the hex code of the color that fill the circle
data-bgcolor= the hex code of the color that used as border on the circle
data-fill = the hex code of circle's background color
data-percent= which percent of the circle will stop the color that fill the circle (100 all the circle, 50 the half of circle etc.)
1) You can define the plans in the html code (see screenshot below, or see the code in vps.html, line 200.
2) You need to define the distance between plans, that exists just below the slider in style.css, lne 329
3) Finally you need to define the various values that displaying when you drag the slider handler, in the javascript that exists in the end of the page (vps.html, line 663)
The HTML template includes pages with 4 plans on the slider (vps.html), 3 plans, 5 plans and 6 plans (in the related name html file).
You can do this, by using "wow" class and the class for the specific animation.
For example : <div data-wow-delay="0.2s" class="wow zoomIn">
- the "wow" class hooks the animation when the specific div is in viewport
- the "zoomIn" class is the animation effect. You can see the effects taht you can assing here : http://daneden.github.io/animate.css/
- the data-wow-delay="0.2s" is a variable that we can assing to define the time that the specific div displaying.
It is in sendmail.php, line 17 ($site_owners_email=)
Just save the 3 video formats (mp4, ogv, webm) that you found in video zip in the /video folder, and update the paths(source src=) in index-video.html that start on line 108.
Just assign the .sticky class to .top and below the top (just below the comment add the <div class="stickyarea"><div>
- login to your mailchimp account, create a list, go to signup forms of this list, choose embedded forms.
- There, mailchimp has a textarea with the embedded code that you need to put on your site.
- Just copy the form action url (see screenshot). Open the files in the template and paste the action url where is mine. (change it).
- Just remove the wow.js script from pages and also remove the related hook from js/custom.js
You can download them from :
1) http://www.smashingmagazine.com/2014/05/27/summer-essentials-icon-set-freebie-eps-png-ai/
2) https://www.iconfinder.com/iconsets/other-icons